<!--  -->
<template>
    <div class="common-layout">
        <el-container>
            <h1>订单管理</h1>
            <el-header>
             
                <div class="common-layout">
                    <el-container>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item style="width:300px;">
                                <el-input v-model="formInline.orderNumber" placeholder="订单号" />
                            </el-form-item>
                            <el-form-item style="width:80px;">
                                <el-button type="primary" @click="select">
                                    <el-icon style="vertical-align: middle">
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </el-form-item>
                            <el-form-item style="width:80px;">
                                <el-button type="primary" @click="reset">
                                    <el-icon>
                                        <Refresh />
                                    </el-icon>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container>
                        <el-header class="bottom-header">
                            <el-table :data="tableData" style="width: 100%" empty-text="暂无数据"
                                :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" border>
                                <el-table-column label="ID" prop="no" width="50" show-overflow-tooltip/>
                                <el-table-column prop="orderNumber" label="订单编号" show-overflow-tooltip />
                                <el-table-column prop="date" label="支付日期" show-overflow-tooltip />
                                <el-table-column prop="totalPrice" label="药品总价" show-overflow-tooltip />
                                <el-table-column prop="acount" label="药品数量" show-overflow-tooltip />
                                <el-table-column prop="username" label="收银员名称" show-overflow-tooltip />
                            </el-table>
                        </el-header>
                        <el-main class="bottom-bar">
                            <span>总计 <span class="number">{{tableData.length}}</span> 条数据</span>
                            <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next"
                                :total="tableData.length" />
                        </el-main>
                    </el-container>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'ArtOrders',
        data() {
            return {
                formInline: {
                    orderNumber: ''
                },
                tableData: [],
            };
        },

        mounted() {
            this.getData();
        },

        methods: {
            reset() {
                this.formInline = {
                    orderNumber: ''
                }
                this.getData();
            },
            getData() {
                var that = this;
                that.$http.get("/custompayinfo/getPayInfoAll")
                .then(function(res){
                    var no = 1;
                    that.tableData = res.list.map(item=>{
                        item={
                            ...item,
                            no:no
                        }
                        no++;
                        return item;
                    })
                    console.log("11", that.tableData);
                })
                .catch(function(error){

                })  
                
            },
            select(){
                var that = this;
                that.$http.get("custompayinfo/getPayInfoList?orderNum="+that.formInline.orderNumber)
                .then(function(res){
                    console.log("wwwr",res);
                    that.tableData = res.data
                })
                .catch(function(error){

                })
            }
        },
    };
</script>

<style lang="css" scoped>
     h1 {
        font-size: 30px;
        font-weight: 600;
        font-family: "微软雅黑";
        color: rgb(73, 72, 72);
        margin-bottom: 30px;
    }
    .el-main {
        padding: 0 !important;
        overflow: hidden;
    }

    .el-header {
        height: 50px;
        padding: 0 !important;
    }


    .el-aside {
        overflow: hidden;
    }

    .el-form-item {
        margin-right: 10px;
    }

    .flex {
        margin-top: 20px;
    }

    /* 下方数据 */
    .bottom-header {
        height: 370px;

    }

    .el-table {
        margin-top: 20px;
        box-shadow: 0 0 5px rgb(195, 206, 217);
    }

    .bottom-bar {
        border-top: 1px solid silver;
    }

    .el-pagination {
        float: left;
        margin-top: 10px;
    }

    .bottom-bar>span {
        margin-top: 16px;
        display: inline-block;

    }

    .add {
        height: 33px;
        /* margin-left: 300px; */
        width: 60px;
        border: none;
        color: #fff;
        border-radius: 5px;
        background-color: red;
        cursor: pointer;
    }

    .add:hover {
        background-color: rgb(242, 85, 85);
    }
</style>